{%load static%}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Probably the most complete UI kit out there. Multiple functionalities and controls added,  extended color palette and beautiful typography, designed as its own extended version of Bootstrap at  the highest level of quality.">
    <meta name="author" content="Webpixels">
    <title>医疗咨询助手</title>
    <!-- Fonts -->
    <link href="{%static 'assets/css/font.css'%}" rel="stylesheet">
    <!-- Theme CSS -->
    <link type="text/css" href="{%static 'assets/css/theme.css'%}" rel="stylesheet">
    <!-- Demo CSS - No need to use these in your project -->
    <link type="text/css" href="{%static 'assets/css/demo.css'%}" rel="stylesheet">
    <style>
      /* Move inline styles to external stylesheet */
      .loader {
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 2s linear infinite;
            margin: 0 auto;
        }

      .bg-primary {
        background-color: #007bff;
      }
      .bg-red {
        background-color: red;
      }
      /* Add semantic class names */
      .navbar-brand {
        font-weight: bold;
      }
      .search-input {
        text-align: right;
      }
      .typeface-entry {
        display: flex;
        align-items: center;
      }
      .typeface-badge {
        text-align: right;
      }
      .footer-link {
        color: #fff;
      }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-transparent navbar-dark bg-blue py-4">
      <div class="container">
        <a class="navbar-brand" href="./"><strong>医护助手</strong></a>
      </div>
      
    </nav>
    <main class="main">
      <section class="spotlight parallax bg-cover bg-size--cover" style="background-image: url({%static 'assets/images/backgrounds/img.jpg'%})">
        <span class="mask bg-primary alpha-7"></span>
        <div class="spotlight-holder py-lg pt-lg-xl">
          <div class="container d-flex align-items-center no-padding">
            <div class="col">
              <div class="row cols-xs-space align-items-center text-center text-md-left justify-content-center">
                <div class="col-7">
                  <div class="text-center mt-5">
                    <div class="container">
                      <div class="row justify-content-center">
                        <div class="col-lg-8">
                          <div class="form-group">
                            <div class="form-group">
                              <div class="input-group input-group-transparent mb-12 search-input">                              
                                <input type="text" id="yourQuestion" class="form-control" placeholder=" 输入你的问题" onkeydown="if(event.keyCode==13){submitQues.click()}">
                                <button type="submit"id="submitQues"  class="input-group-text text-white" onclick="sendText()"><i class="fas fa-search"></i></button>
                              </div>                            
                            </div>
                          </div>
                        </div>  
                      <div>
                             
                      </div>                      
                      </div> 
                    </div>                     
                    </div>
                  </div>                  
                </div>               
              </div>             
            </div>            
          </div>          
        </div>
        
      </section>
       <!--主要部分-->
       <section class="slice slice-lg">
       
        <div class="row typeface-palette cols-xs-space cols-sm-space cols-md-space">
          
          <div class="col-sm-4">
            <a>
              <div class="typeface-entry">
                <button id="good1" class="badge badge-md typeface-badge badge-pill text-black">点赞<i class="fas fa-heart"></i></button>
                <h3 class="heading">
                  文心一言
                </h3>
                <div id="wenxin">                  
                </div>
              </div>
            </a>
          </div>
          <div class="col-sm-4">
            <a>
              <div class="typeface-entry">
                <button id="good2" class="badge badge-md typeface-badge badge-pill text-blcak">点赞<i class="fas fa-heart"></i></button>
                <h3 class="heading">
                  科大讯飞
                </h3>
                <div id="keda">                 
                </div>
              </div>
            </a>
          </div>
          <div class="col-sm-4">
            <a>
              <div class="typeface-entry">
                <button id="good3" class="badge badge-md typeface-badge badge-pill text-blcak">点赞<i class="fas fa-heart"></i></button>
                <h3 class="heading">
                  ChatGpt4
                </h3>
                <div id="Gpt4">                 
                </div>
              </div>
            </a>
          </div>
          
        </div>
       
    
      </section>
 
     
    </main>
    <footer class="pt-5 pb-3 footer footer-dark  bg-tertiary">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-4">
            <div class="pr-lg-5">
              <h1 class="heading h6 text-uppercase font-weight-700 mb-3"><strong>医护助手</strong></h1>
              <style>
  
                #main {
                  columns:200px 2;
                }
              
              </style>
              <div id="main">
              <p style="color:#fff">
              欢迎使用医疗助手！这是一个大语言模型的聚合平台，您可以提问医疗相关
              的问题，<u>如果对某个回答满意记得点赞哦~</u></p>
              <p style="color:#fff">目前暂不提供上下文对话功能，也不提供历史数据
              功能，如需查看数据，请联系我们。</p>
              <p style="color:#fff">ChatGPT 模型的响应较慢，也会经常报错，使用时
              请注意。</p>
              <p style="color:#fff">相关医疗信息来自模型生成，仅供参考</p>
              <P style="color:#fff">有任何问题请联系：hairlessvillager@qq.com</P>
              </div>
            </div>
          </div>
        </div>
      </div>
      <hr>
      <div class="d-flex align-items-center">
        <span>
          &copy; 2018 <a class="footer-link" target="_blank">Webpixels</a>. All rights reserved.
        </span>
      </div>
    </div>
  </footer>
  <!-- Core -->
  <script src="{%static 'assets/vendor/jquery/jquery.min.js'%}"></script>
  <script src="{%static 'assets/vendor/popper/popper.min.js'%}"></script>
  <script src="{%static 'assets/js/bootstrap/bootstrap.min.js'%}"></script>
  <!-- FontAwesome 5 -->
  <script src="{%static 'assets/vendor/fontawesome/js/fontawesome-all.min.js'%}" defer></script>
  <!-- Page plugins -->
  <script src="{%static 'assets/vendor/bootstrap-select/js/bootstrap-select.min.js'%}"></script>
  <script src="{%static 'assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js'%}"></script>
  <script src="{%static 'assets/vendor/input-mask/input-mask.min.js'%}"></script>
  <script src="{%static 'assets/vendor/nouislider/js/nouislider.min.js'%}"></script>
  <script src="{%static 'assets/vendor/textarea-autosize/textarea-autosize.min.js'%}"></script>
  <!-- Theme JS -->
  <script src="{%static 'assets/js/theme.js'%}"></script>
  <script>    
     var json1='{"id":0,"text":"null"}';
     var json2='{"id":0,"text":"null"}';
     var json3='{"id":0,"text":"null"}';  
     function clear_content()
        {
            
        //  清除文本
            
        }  
    var q_id_num;
    function set_Text()
    {
           
       //发送q_id
            var xhttp1 = new XMLHttpRequest();
            var xhttp2 = new XMLHttpRequest();
            var xhttp3 = new XMLHttpRequest(); 
             //增加搜索框       
             var outputText0 = document.getElementById("wenxin"); 
            var outputText1 = document.getElementById("keda");    
            var outputText2 = document.getElementById("Gpt4");   

           
      //生成问题回答
             xhttp1.onreadystatechange = function()
             {          
             
              const json = this.responseText;              
              json1=json;
              console.log("json1:");    
              console.log(json1);
              const obj = JSON.parse(json); 
             
                           
              if (this.readyState == 4 && this.status == 200) 
                {
                         
                  outputText0.innerHTML = "<p>" + obj.text + "</p>";                   
                  
                }               
            };         
            xhttp2.onreadystatechange = function()
             {          
             
              const json = this.responseText;
              json2=json;
              const obj = JSON.parse(json);                     
                           
              if (this.readyState == 4 && this.status == 200) 
                {
                     
                 
                  outputText1.innerHTML = "<p>" + obj.text + "</p>";                   
                  
                }               
            };            
            xhttp3.onreadystatechange = function()
             {          
             
              const json = this.responseText;
              json3=json;
              const obj = JSON.parse(json); 
                                         
              if (this.readyState == 4 && this.status == 200) 
                {                                
                  outputText2.innerHTML = "<p>" + obj.text + "</p>";                                     
                }               
            };   

            xhttp1.open("POST", "/api/chat_with_ernie", true);
            xhttp1.setRequestHeader("Content-type", "application/json");
            xhttp1.send(JSON.stringify({"q_id":q_id_num}));
            // console.log("send:");
            // console.log(q_id_num);

            xhttp2.open("POST", "/api/chat_with_spark", true);
            xhttp2.setRequestHeader("Content-type", "application/json");
            xhttp2.send(JSON.stringify({"q_id": q_id_num}));

            xhttp3.open("POST", "/api/chat_with_GPT4Chat", true);
            xhttp3.setRequestHeader("Content-type", "application/json");
            xhttp3.send(JSON.stringify({"q_id": q_id_num}));  

            
    }
    function sendText()
     {
            //恢复点赞图标为白色
            var color = "#FFFFFF";               
            var button1 = document.getElementById("good1");
            button1.style.backgroundColor = color;
            var button2 = document.getElementById("good2");
            button2.style.backgroundColor = color;   
            var button3 = document.getElementById("good3");
            button3.style.backgroundColor = color;   
            // clear_content();
            document.getElementById("wenxin").innerHTML=""; 
            document.getElementById("keda").innerHTML="";    
            document.getElementById("Gpt4").innerHTML="";  
            //获取问题inputext
            var inputText = document.getElementById("yourQuestion").value;
            
            var xhttp  =  new XMLHttpRequest();
           
           
            // outputText0.innerHTML+=  "<div class='loader timer'></div>";
            // outputText1.innerHTML+=  "<div class='loader timer'></div>";
            // outputText2.innerHTML+=  "<div class='loader timer'></div>";  
            // var q_id_num=0;
            // xhttp.onreadystatechange=function()
            // {            
            //   if (this.readyState == 4 && this.status == 200) 
            //     {
            //       var result = this.responseText;  
            //       var num=parseInt(result);     
            //       q_id_num=num;
            //       console.log("q_id_1:");
            //       cosloe.log(result);
            //     }                
            //   // console.log("q_id_2:");
            //   // cosloe.log(q_id_num);
            // }
            // 全局变量
            

            // 准备要发送的数据
            var requestData = {
              // 根据你的需求，编写要发送的JSON数据
              "text": inputText
            };

            // 发送API请求
            fetch('/api/create_question', {
              method: 'POST', // 请求方法为POST
              headers: {
                'Content-Type': 'application/json' // 指定请求的Content-Type为JSON
              },
              body: JSON.stringify(requestData) // 将待发送的数据转为JSON字符串
            })
              .then(response => response.json()) // 将响应转换为JSON格式
              .then(data => {
                // // 获取API返回的数字
                // var number =  parseInt(data);
                
                // // 将数字赋值给全局变量
                // q_id_num = number;
                
                // // 可以在这里进行其他操作，使用globalVariable的值
                // console.log(q_id_num);
                q_id_num=data;
                console.log(q_id_num);
                set_Text();

              })
              .catch(error => {
                console.error('请求API时出错：', error);
              });
          
              
            //获取q_id
            
            // xhttp.open("POST", "/api/create_question", true);
            // xhttp.setRequestHeader("Content-type", "application/json");
            // xhttp.send(JSON.stringify({"text": inputText}));
           
           
            
                        
            }
       
            
    </script>
    <script>
    
    const btn1 = document.getElementById('good1');
    var flag1=0;
    btn1.onclick = function(){
    var red = "#FF0000";
    var white="#FFFFFF";
    if(flag1==0)
    {
      btn1.style.backgroundColor=red;
    }
    if(flag1==1)
    {
      btn1.style.backgroundColor =white;
    }
    if(flag1==2)
    {
      btn1.style.backgroundColor=red;
      flag1=0;
    }
    flag1++;
    if(flag1==1)
      {
        var xhttplike1 =new  XMLHttpRequest();
        const obj1 = JSON.parse(json1); 
            console.log(json1);
      xhttplike1.open("POST", "/api/vote_like", true);
      xhttplike1.setRequestHeader("Content-type", "application/json");
      xhttplike1.send(JSON.stringify({"text":obj1.text,"id":obj1.id}));
    }
    if(flag1==2)
    {
      var xhttplike1 =new XMLHttpRequest();
      const obj1 = JSON.parse(json1); 
      console.log(json1);
      console.log("dislike");
      xhttplike1.open("POST", "/api/vote_dislike", true);
      xhttplike1.setRequestHeader("Content-type", "application/json");
      xhttplike1.send(JSON.stringify({"text":obj1.text,"id":obj1.id}));
    }
    }

    const btn2 = document.getElementById('good2');
    var flag2=0;
    btn2.onclick = function(){
    var red = "#FF0000";
    var white="#FFFFFF";
    if(flag2==0)
    {
      btn2.style.backgroundColor=red;
    }
    if(flag2==1)
    {
      btn2.style.backgroundColor =white;
    }
    if(flag2==2)
    {
      btn2.style.backgroundColor=red;
      flag2=0;
    }
    flag2++;
    if(flag2==1)
      {
      var xhttplike2 =new  XMLHttpRequest();
      const obj2 = JSON.parse(json2); 
            console.log(json2);
      xhttplike2.open("POST", "/api/vote_like", true);
      xhttplike2.setRequestHeader("Content-type", "application/json");
      xhttplike2.send(JSON.stringify({"text":obj2.text,"id":obj2.id}));
      }
      if(flag2==2)
    {
      var xhttplike2 =new  XMLHttpRequest();
      const obj2 = JSON.parse(json2); 
      console.log(json2);
      console.log("dislike");
      xhttplike2.open("POST", "/api/vote_dislike", true);
      xhttplike2.setRequestHeader("Content-type", "application/json");
      xhttplike2.send(JSON.stringify({"text":obj2.text,"id":obj2.id}));
    }
    }
    var flag3=0;
    const btn3 = document.getElementById('good3');
    btn3.onclick = function(){
    var red = "#FF0000";
    var white="#FFFFFF";
    if(flag3==0)
    {
      btn3.style.backgroundColor=red;
    }
    if(flag3==1)
    {
      btn3.style.backgroundColor =white;
    }
    if(flag3==2)
    {
      btn3.style.backgroundColor=red;
      flag3=0;
    }
    flag3++;
    console.log(btn3.style.backgroundColor);
    if(flag3==1)  
    {
      var xhttplike3 =new  XMLHttpRequest();
      const obj3 = JSON.parse(json3); 
      console.log(json3);
      xhttplike3.open("POST", "/api/vote_like", true);
      xhttplike3.setRequestHeader("Content-type", "application/json");
      xhttplike3.send(JSON.stringify({"text":obj3.text,"id":obj3.id}));
    }
    if(flag3==2)
    {
      var xhttplike3 =new  XMLHttpRequest();
      const obj3 = JSON.parse(json3); 
      console.log(json3);
      console.log("dislike");
      xhttplike3.open("POST", "/api/vote_dislike", true);
      xhttplike3.setRequestHeader("Content-type", "application/json");
      xhttplike3.send(JSON.stringify({"text":obj3.text,"id":obj3.id}));
    }
    }

  </script> 
</body>
</html>